<template>
	<div id="PlainList">
		<x-header :left-options="{showBack: false}" title="投诉记录" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div v-if="auction_plaint == ''">
			<div class="no-data">
				<img src="../assets/images/home/nodata.png" />
			</div>
		</div>
		<div v-else class="wrap" v-for="item in auction_plaint">
			<router-link :to="'/PlainDetail/plaint_id/' + item.plaint_id">
				<div class="title-bar">
					<p>
						<span>投诉原因</span>
						<b>{{item.plaint_cause}}</b>
						<i>待处理</i>
					</p>
				</div>
				<div class="infoWrap">
					<img v-if="item.goods.goods_thumb.indexOf('/uploads') == 0" :src="'/los/uploads/thumb/goods/' + item.goods.goods_id + '_98X98.jpeg'" alt="" />
					<img v-else :src="item.goods.goods_thumb" />
					<div class="desc">
						<span>{{item.goods_name}}</span>
						<p v-html="item.goods.goods_content">{{item.goods.goods_content}}</p>
					</div>
					<p class="timer">{{item.add_time}}</p>
				</div>
			</router-link>

		</div>

	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader } from "vux";
	export default {
		data() {
			return {
				auction_plaint: [],
			}
		},
		components: {
			XHeader,
		},

		activated() {
			this.getGoodsDetail();
		},
		methods: {
			//获取商品信息
			getGoodsDetail: function() {
				let page = 1;
				let rows = 10;
				this.$http({
					method: 'GET',
					url: '/los/api/auction/plaint_list.json?page=' + page + '&rows=' + rows,
					data: ''
				}).then((result) => {
					this.auction_plaint = result.data.auction_plaint;
				}).catch((err) => {
					console.log(err);
				})
			},
			back: function() {
				window.history.go(-1);
			},

		}
	}
</script>

<style scoped>
	#PlainList {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	#PlainList .no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}
	
	#PlainList .no-data img {
		width: 100%;
	}
	
	.header {
		background: #fff;
	}
	
	.wrap {
		background: #fff;
		margin-top: 0.26rem;
	}
	
	.wrap .title-bar {
		line-height: 1.17rem;
		height: 1.17rem;
		position: relative;
		padding: 0 0.26rem;
	}
	
	.wrap .title-bar p {
		height: 100%;
		width: 100%;
		font-size: 0.4rem;
		overflow: hidden;
		color: #777;
	}
	
	.wrap .title-bar:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 1.17rem;
		right: 0;
		height: 1px;
		width: 96%;
		margin: 0 auto;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.wrap .title-bar p span {
		color: #777;
	}
	
	.wrap .title-bar p b {
		margin-left: 0.61rem;
		font-weight: normal;
		color: #333;
	}
	
	.wrap .title-bar p i {
		float: right;
		font-style: normal;
	}
	
	.infoWrap {
		width: 100%;
		background: #fff;
		overflow: hidden;
		padding: 0.26rem;
		margin-bottom: 0.26rem;
	}
	
	.infoWrap img {
		float: left;
		width: 2.37rem;
		height: 2.37rem;
		border-radius: 0.1rem;
	}
	
	.infoWrap .desc {
		float: right;
		margin-left: 0.26rem;
		width: 72%;
		overflow: hidden;
	}
	
	.infoWrap .desc span {
		display: block;
		line-height: 0.58rem;
		font-size: 0.34rem;
	}
	
	.infoWrap .desc p {
		margin-top: 0.26rem;
		line-height: 0.5rem;
		height: 1rem;
		overflow: hidden;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.infoWrap .timer {
		float: right;
		font-size: 0.32rem;
		color: #aaa;
		margin-top: 0.13rem;
		margin-right: 0.1rem;
	}
</style>